<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

    <style type="text/css">
      body {
          background: url(/static/img/bg.jpg);
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }

      .content {
          margin: 0 auto;
          margin-top: 120px;
          padding: 20px;
          width: 70%;
          height: 100%;
          background: #d0d0d0;
          border-radius: 4px;
          overflow:scroll;
          box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
          background-color: rgba(255, 255, 255, 0.5)
      }
  </style>
  </head>
<body>
<div id="app">
    <div class="content">
    <table class="table table-striped" style="height: 500px" >
        <thead>
            <tr>
                <th>Book ID</th>
                <th>Book Name</th>
                <th>Book Price</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}} </td>
                <td>{{item.price}}</td>
                <td><button type="button" class="btn btn-danger">删除</button></td>
            </tr>
            </tbody>
    </table>
    </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    books: []
  },
  mounted () {
        console.log("app");
        this.getBooksData();
  },
  // 在 `methods` 对象中定义方法
  methods: {
    getBooksData(){
      axios.get('/books').then(response => {
          console.log(response.data);
　　　　　　this.books = response.data;
　　　　}, response => {
　　　　　　console.log(response);
　　　　});
    }
  }
})

</script>
</body>
</html>